<template>
  <div class="department">
    <screen v-bind="Config" v-model:searchData="searchData">
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button :icon="RefreshRight" @click="reset">重置</el-button>
        </div>
      </template>
    </screen>
    <div class="content">
      <el-button type="primary" @click="openRolePannel">新增角色</el-button>
      <x-table
        :tableList="roleList"
        v-bind="tableConfig"
        :currentPage="searchData.page"
        :pageSize="searchData.psize"
        :count="count"
        @pageChange="handlePageChange"
        @pszieChange="handleSizeChange"
        @handleEditClcik="handleEditClcik"
      >
        <template #create_time="{ row }">
          <div v-format-time>{{ row.create_time }}</div>
        </template>
      </x-table>
    </div>

    <el-dialog v-model="rolePannel" title="新增角色">
      <el-form :model="newRoleForm" label-width="120px">
        <el-form-item label="角色描述">
          <el-input v-model="newRoleForm.intro" />
        </el-form-item>
        <el-form-item label="角色名字">
          <el-input v-model="newRoleForm.name" />
        </el-form-item>
        <el-form-item label="角色菜单">
          <el-tree :data="allMenu" :props="Treeprops" show-checkbox @check="nodeClick" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addRole">Create</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- <el-dialog v-model="rolePannel" title="编辑角色">
      <el-form :model="edit" label-width="120px">
        <el-form-item label="角色描述">
          <el-input v-model="newRoleForm.name" />
        </el-form-item>
        <el-form-item label="角色名字"> </el-form-item>
        <el-form-item label="角色菜单">
          <el-tree :data="allMenu" :props="Treeprops" show-checkbox @check="nodeClick" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addRole">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { RefreshRight, Search } from "@element-plus/icons"
import { ref } from "vue"

import { usePageHandle } from "@/hooks/useSearchHandle"

import screen from "@/components/screen"
import xTable from "@/components/table"

import { Config } from "./config/search.config"
import { tableConfig } from "./config/table.config"

import { getAllRole, getAllMenu, postAddRoleData, getMenuByRoleId } from "@/api"
import type { IRole } from "@/api"
const searchData = ref({
  psize: 10,
  page: 1,
  name: "",
  intro: "",
  create_time: ""
})
let roleList: IRole[] = ref([])
let count: number = ref(0)
const newRoleForm = ref({
  name: "",
  intro: "",
  menu: "",
  children: ""
})
const allMenu = ref([])
const fecthList = async () => {
  const list = await getAllRole(searchData.value)
  roleList.value = list.data.data
  count.value = list.data.count
}
fecthList()
const [search, reset, initData] = usePageHandle(fecthList, searchData)

const handlePageChange = (val: number) => {
  console.log(val)
}
const handleSizeChange = (val: number) => {
  console.log(val)
}
const openRolePannel = async () => {
  const menu = await getAllMenu(searchData.value)
  allMenu.value = menu.data.data
  rolePannel.value = true
}
const Treeprops = {
  value: "id",
  label: "name",
  children: "children"
}
const rolePannel = ref(false)
const nodeClick = (checkedNode, Nodes) => {
  // 父级菜单id
  newRoleForm.value.menu = Nodes.halfCheckedNodes.map(item => item.id).toString()
  newRoleForm.value.children = Nodes.checkedNodes
}
const addRole = async () => {
  newRoleForm.value.children = newRoleForm.value.children.reduce((preval, val) => {
    if (val.children) {
      preval.push(...val.children.map(val => val.id))
    } else {
      if (!preval.includes(val.id)) {
        preval.push(val.id)
      }
    }
    return preval
  }, [])
  console.log(newRoleForm.value.children)
  const res = await postAddRoleData(newRoleForm.value)
  console.log(res)
}
const handleEditClcik = async row => {
  const res = await getMenuByRoleId({ menu: row.menu, children: row.children })
  console.log(res.data)
}
</script>

<style scoped lang="scss">
.department {
  .handle-btns {
    float: right;
    padding: 0 20px 10px 0;
  }
}
</style>
